<template>
  <a-modal v-model:open="visible" title="导入文件" @cancel="onCancel" width="680px" :footer="null">
    <a-form layout="vertical">
      <a-row>
        <a-col :span="24">
          <a-form-item label="文件格式">
            <a-radio-group v-model:value="form.fileFormat">
              <a-radio value="excel">Excel</a-radio>
              <a-radio value="pdf">PDF</a-radio>
            </a-radio-group>
            <span v-if="form.fileFormat === 'pdf'" style="margin-left: 8px;">
              <a-tag color="orange">回单自动关联凭证，随凭证打印</a-tag>
            </span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="银行类型">
            <a-select v-model:value="form.bankType" style="width: 180px;">
              <a-select-option value="交通银行">交通银行</a-select-option>
              <a-select-option value="工商银行">工商银行</a-select-option>
              <a-select-option value="农业银行">农业银行</a-select-option>
            </a-select>
            <span style="margin-left: 8px; color: #999; font-size: 12px;">支持PDF导入的银行</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="文件类型">
            <a-select v-model:value="form.fileType" style="width: 120px;">
              <a-select-option value="回单">回单</a-select-option>
              <a-select-option value="对账单">对账单</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="文件来源">
            <a-radio-group v-model:value="form.fileSource">
              <a-radio value="local">本地上传</a-radio>
              <a-radio value="cloud">云盘</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <div style="background: #fafafa; border: 1px dashed #d9d9d9; padding: 32px 0; text-align: center; margin-bottom: 16px;">
        <a-upload
          v-if="form.fileSource === 'local'"
          :before-upload="beforeUpload"
          :show-upload-list="false"
        >
          <a-button type="dashed" style="height: 48px; font-size: 16px;">
            请选择{{ form.fileFormat === 'pdf' ? 'PDF' : '文件' }}
          </a-button>
        </a-upload>
        <div style="margin-top: 12px; color: #999; font-size: 13px;">
          点击按钮或文件拖动至虚线框内进行上传；<br />
          文件不超过20M（Excel不超过3000行，图片PDF不超过50页，文字PDF不超过500页）；
        </div>
      </div>
      <div style="text-align: center;">
        <a-button type="primary" style="margin-right: 16px;" @click="onImport">导入</a-button>
        <a-button @click="onCancel">取消</a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
const visible = ref(false);
const form = reactive({
  fileFormat: 'pdf',
  bankType: '交通银行',
  fileType: '回单',
  fileSource: 'local',
  file: null,
});
function showModal() {
  visible.value = true;
}
function onCancel() {
  visible.value = false;
}
function onImport() {
  // TODO: 实际导入逻辑
  visible.value = false;
}
function beforeUpload(file) {
  form.file = file;
  return false; // 阻止自动上传
}
defineExpose({ showModal });
</script>

<style scoped>
:deep(.ant-modal-content) {
  padding-bottom: 0;
}
</style> 